<template>
  <div class="my-applications-container">
    <div class="header">
      <h2>我的申请记录</h2>
    </div>
    
    <div v-if="loading" class="loading">
      加载中...
    </div>
    
    <div v-else-if="applications.length === 0" class="empty-state">
      <p>您还没有申请任何职位。</p>
      <router-link to="/jobs" class="browse-jobs-link">浏览职位</router-link>
    </div>
    
    <div v-else class="applications-list">
      <div v-for="application in applications" :key="application.id" class="application-card">
        <div class="application-header">
          <h3>{{ getJobTitle(application.jobId) }}</h3>
          <span class="application-status" :class="application.status">
            {{ getStatusText(application.status) }}
          </span>
        </div>
        
        <div class="application-details">
          <p><strong>公司:</strong> {{ getJobCompany(application.jobId) }}</p>
          <p><strong>申请时间:</strong> {{ formatDate(application.createdAt) }}</p>
          <p><strong>状态更新时间:</strong> {{ formatDate(application.updatedAt) }}</p>
        </div>
        
        <div class="application-resume">
          <p><strong>简历信息:</strong></p>
          <p>{{ application.resume }}</p>
        </div>
        
        <div class="application-actions">
          <router-link :to="`/jobs/${application.jobId}`" class="view-job-btn">查看职位</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getApplicationsByApplicant } from '../services/applicationService';
import { getCurrentUser } from '../services/authService';
import { getJobById } from '../services/jobService';

// 数据
const applications = ref([]);
const loading = ref(true);

// 加载申请数据
const loadApplications = () => {
  try {
    const currentUser = getCurrentUser();
    applications.value = getApplicationsByApplicant(currentUser.id);
  } catch (err) {
    console.error('加载申请记录失败:', err);
  } finally {
    loading.value = false;
  }
};

// 获取职位标题
const getJobTitle = (jobId) => {
  try {
    const job = getJobById(jobId);
    return job ? job.title : '职位已删除';
  } catch (err) {
    return '未知职位';
  }
};

// 获取公司名称
const getJobCompany = (jobId) => {
  try {
    const job = getJobById(jobId);
    return job ? job.company : '未知公司';
  } catch (err) {
    return '未知公司';
  }
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN');
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'accepted': '已接受',
    'rejected': '已拒绝'
  };
  return statusMap[status] || status;
};

// 组件挂载时加载数据
onMounted(() => {
  loadApplications();
});
</script>

<style scoped>
.my-applications-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 2rem;
}

.header h2 {
  margin: 0;
  color: #2c3e50;
}

.loading,
.empty-state {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #7f8c8d;
}

.empty-state p {
  margin-bottom: 1rem;
}

.browse-jobs-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.browse-jobs-link:hover {
  text-decoration: underline;
}

.applications-list {
  display: grid;
  gap: 1.5rem;
}

.application-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.application-header h3 {
  margin: 0;
  color: #2c3e50;
}

.application-status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

.application-status.pending {
  background-color: #f1c40f;
  color: #333;
}

.application-status.accepted {
  background-color: #2ecc71;
  color: white;
}

.application-status.rejected {
  background-color: #e74c3c;
  color: white;
}

.application-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.application-details p {
  margin: 0;
  color: #34495e;
}

.application-resume p {
  margin: 0 0 0.5rem 0;
  color: #34495e;
  line-height: 1.5;
}

.application-resume p:first-child {
  font-weight: 500;
}

.application-actions {
  text-align: right;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.view-job-btn {
  padding: 0.5rem 1rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.view-job-btn:hover {
  background-color: #2980b9;
}

@media (max-width: 768px) {
  .application-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .application-details {
    grid-template-columns: 1fr;
  }
}
</style>